<template>
    <div class="grid-view">
        <GridView :layout="layout" :node-key="nodeKey" :direction="direction" :wrap="wrap" :col="col">
            <template #default="{ grid }">
                <slot :grid="grid"></slot>
            </template>
        </GridView>
    </div>
</template>

<script>
import Vue from 'vue'
import GridView from './GridView.vue'
import GridViewItem from './GridViewItem.vue'
import { DirectionEnum, WrapEnum } from './util/emnu'

Vue.component(GridView.name, GridView)
Vue.component(GridViewItem.name, GridViewItem)

export default {
    props: {
        // 数据
        layout: {
            type: Array,
            default: () => []
        },
        // 唯一标识
        nodeKey: String,
        // flex方向
        direction: {
            type: String,
            default: 'row',
            validator: (value) => DirectionEnum.indexOf(value) !== -1,
        },
        // flex换行
        wrap: {
            type: String,
            default: 'nowrap',
            validator: (value) => WrapEnum.indexOf(value) !== -1,
        },
        // 换行时每行个数
        col: Number
    },
    provide() {
        return {
            // 管理权限下放
            VoGridView: this.controller,
        }
    },
    data() {
        return {
            // 管理者
            controller: {
                bus: null,
                currentItem: null,
            },
            // 依赖
            collects: [],
        }
    },
    created() {
        // 创建状态管理
        this.controller.bus = new Vue()
        this.onListener()
    },
    beforeDestroy() {
        this.offListener()
    },
    methods: {
        // 状态管理监听
        onListener() {
            this.controller.bus.$on('collect-add', this.collectAdd)
            this.controller.bus.$on('collect-remove', this.collectRemove)
            this.controller.bus.$on('on-change', this.handleItemChange)
        },
        // 状态管理移除
        offListener() {
            this.controller.bus.$off('collect-add', this.collectAdd)
            this.controller.bus.$off('collect-remove', this.collectRemove)
            this.controller.bus.$off('on-change', this.handleItemChange)
        },
        // 收集依赖
        collectAdd(el) {
            if (!this.collects.includes(el)) {
                this.collects.push(el)
            }
        },
        // 移除依赖
        collectRemove(el) {
            if (this.collects.includes(el)) {
                const index = this.collects.findIndex(e => e === el)
                this.collects.splice(index, 1)
                if (el.property === this.controller.currentItem) {
                    this.$emit('on-active', null)
                }
            }
        },
        // 点击事件
        handleItemChange(item, el) {
            this.controller.currentItem = item
            this.$emit('on-active', item)
        },
        // 设置当前选中
        setCurrentItem(item) {
            this.controller.currentItem = item
        },
        // 设置flex方向
        setDirection(direction) {
            console.log(this.controller.currentItem);
            if (this.controller.currentItem && DirectionEnum.includes(direction)) {
                this.$set(this.controller.currentItem, 'direction', direction)
            }
        },
        // 设置flex换行
        setWrap(wrap) {
            console.log(this.controller.currentItem);
            if (this.controller.currentItem && WrapEnum.includes(wrap)) {
                this.$set(this.controller.currentItem, 'wrap', wrap)
            }
        },
        // 设置换行个数
        setCol(col) {
            console.log(this.controller.currentItem);
            if (this.controller.currentItem && typeof col === 'number' && !isNaN(col)) {
                this.$set(this.controller.currentItem, 'col', col)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.grid-view{
    border: 1px solid #DCDFE6;
}
</style>
